<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: aaa
  Date: 2023/12/11
  Time: ฅ(΅•ㅅ•΅❀)ฅ 09:44
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
	<style>
		body {
			background-image: url('<c:url value='/img/common/bg.png'/>');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			height: 100vh;
		}

		.custom-links {
			text-decoration: none;
			color: gray;
		}

		.vertical-line {
			height: 20px;
			width: 2px;
			background-color: #ccc;
		}
	</style>
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<script src="./js/bootstrap.min.js"></script>
</head>

<body>
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
	<div class="row align-items-center g-lg-5 py-5">
		<div class="col-lg-7 text-center text-lg-start">
			<h1 class="display-4 fw-bold lh-1 mb-3" style="color: white;">欢迎来到FunPlay</h1>
			<p class="col-lg-10 fs-4" style="color: white;">登录后畅享属于你的游戏世界！！！</p>
		</div>
		<div class="col-md-10 mx-auto col-lg-5">
			<form class="p-4 p-md-5 border rounded-3 bg-light" action="<c:url value="/login"/>" method="post">
				<h2 class="mb-4">登录</h2>
				<div class="form-floating mb-3">
					<input type="text" class="form-control" name="username" placeholder="name@example.com">
					<label for="username">账号 \ 邮箱 \ 手机号</label>
				</div>
				<input type="hidden" name="gameId" value="${param.gameId}">
				<!-- 其他表单元素 -->
				<div class="form-floating mb-3">
					<input type="password" class="form-control" name="password" placeholder="Password">
					<label for="password">密码</label>
				</div>
				<div class="form-floating mb-3">
					<select class="form-select" name="identity" aria-label="选择身份">
						<option value="" disabled selected>选择身份</option>
						<option value="customer">客户</option>
						<option value="admin">管理员</option>
					</select>
					<label for="identity">身份选择</label>
				</div>
				<button type="submit" class="w-100 btn btn-lg btn-primary">登录</button>
				<hr class="my-4">
				<div class="d-flex justify-content-end align-items-center">
					<a href="#" class="custom-links me-2">忘记密码</a>
					<div class="vertical-line mx-2"></div>
					<a href="./register.jsp" class="custom-links ms-2">注册新用户</a>
				</div>
			</form>
		</div>
	</div>
</div>
</body>
</html>
